<template>
  <div class="app-container">
    <el-card v-if="!visible">
      <div slot="header">
        <div class="mb-4 flex">
          <div class="flex items-center">
            <p>开始时间:</p>
            <el-date-picker
              class="mr-5"
              clearable
              v-model="date_value"
              type="datetimerange"
              range-separator="-"
              start-placeholder=""
              end-placeholder=""
              value-format="timestamp"
              @change="handleChangeDate"
            >
            </el-date-picker>
          </div>
          <div class="flex items-center">
            <p>结束时间:</p>
            <el-date-picker
              class="mr-5"
              clearable
              v-model="date_value2"
              type="datetimerange"
              range-separator="-"
              start-placeholder=""
              end-placeholder=""
              value-format="timestamp"
              @change="handleChangeDate2"
            >
            </el-date-picker>
          </div>
          <div class="flex items-center">
            <p>创建时间:</p>
            <el-date-picker
              class="mr-5"
              clearable
              v-model="date_value1"
              type="datetimerange"
              range-separator="-"
              start-placeholder=""
              end-placeholder=""
              value-format="timestamp"
              @change="handleChangeDate1"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="">
          <el-input
            style="width:200px"
            class="mr-4"
            clearable
            placeholder="请输入用户编号"
            v-model="listQuery.user_code"
          ></el-input>
          <el-input
            style="width:200px"
            class="mr-4"
            clearable
            placeholder="请输入用户昵称"
            v-model="listQuery.nickname"
          ></el-input>
          <el-input
            style="width:200px"
            class="mr-4"
            clearable
            placeholder="请输入房间名称"
            v-model="listQuery.room_name"
          ></el-input>
          <el-select
            v-model="listQuery.is_rain"
            class="mr-4"
            clearable
            placeholder="请选择是否为红包雨"
          >
            <el-option :value="0" label="普通红包"> </el-option>
            <el-option :value="1" label="红包雨"> </el-option>
          </el-select>
          <el-select
            v-model="listQuery.type"
            class="mr-4"
            clearable
            filterable
            placeholder="请选择红包类型"
          >
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index + '红类型'"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <el-button type="primary" @click="deBounceWrap(handleSearch)"
            >搜索</el-button
          >
          <el-button type="primary" @click="deBounceWrap(handleReset)">
            重置
          </el-button>
        </div>
      </div>
      <el-table :data="menuList" border>
        <el-table-column prop="id" width="60" label="ID"> </el-table-column>
        <el-table-column prop="" label="用户编号">
          <template slot-scope="{ row }">
            <p v-if="row.user_data">{{ row.user_data.user_code }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="昵称">
          <template slot-scope="{ row }">
            <p v-if="row.user_data">{{ row.user_data.nickname }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="房间编号">
          <template slot-scope="{ row }">
            <p v-if="row.user_room">{{ row.user_room.room_code }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="房间名称">
          <template slot-scope="{ row }">
            <p v-if="row.user_room">{{ row.user_room.room_name }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="is_rain" label="是否红包雨">
          <template slot-scope="{ row }">
            <p>{{ row.is_rain ? "红包雨" : "普通红包" }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="红包类型">
          <template slot-scope="{ row }">
            <p v-if="row.type === 1">无门槛</p>
            <p v-else-if="row.type === 2">关注</p>
            <p v-else-if="row.type === 3">口令</p>
            <p v-else-if="row.type === 4">礼物</p>
            <p v-else>红包雨</p>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="红包数量"> </el-table-column>
        <el-table-column prop="money" label="红包金币"> </el-table-column>
        <el-table-column prop="grab_money" label="被抢金币"> </el-table-column>
        <el-table-column prop="password" label="口令"> </el-table-column>
        <el-table-column prop="start_time" label="开始时间"> </el-table-column>
        <el-table-column prop="end_time" label="结束时间"> </el-table-column>
        <el-table-column prop="return_time" label="退钱时间"> </el-table-column>
        <el-table-column prop="create_time" label="创建时间"> </el-table-column>
        <el-table-column prop="id" label="操作" width="100" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="handleGetDetail(row.id)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <cus-pagination
        :total="total"
        :page.sync="meta.page"
        :limit.sync="meta.page_size"
        @pagination="handleGetData"
      />
    </el-card>
    <Detail :visible.sync="visible" :id="detail"></Detail>
  </div>
</template>

<script>
import Detail from "./comps/detail";

import { listData } from "@//api/redEnvelope/redEnvelopeRecord";

export default {
  name: "",
  data() {
    return {
      visible: false,
      total: 0,
      date_value: null,
      date_value1: null,
      date_value2: null,
      meta: { page: 1, page_size: 20 },
      listQuery: {
        user_code: undefined,
        nickname: undefined,
        room_name: undefined,
        is_rain: undefined,
        type: undefined,
        rush_start_time: undefined,
        rush_end_time: undefined,
        pause_start_time: undefined,
        pause_end_time: undefined,
        start_time: undefined,
        end_time: undefined
      },
      typeOptions: [
        // { value: 0, label: "红包雨" },
        { value: 1, label: "无门槛" },
        { value: 2, label: "关注" },
        { value: 3, label: "口令" },
        { value: 4, label: "礼物" }
      ],
      menuList: [],
      detail: null
    };
  },

  components: {
    Detail
  },

  created() {
    this.handleGetData();
  },

  methods: {
    async handleGetData() {
      const res = await listData(this.meta, this.listQuery);
      if (res.code === 200) {
        this.menuList = res.data.list;
        this.total = res.data.total;
      }
    },
    /**自定义时间 */
    handleChangeDate(value) {
      if (value) {
        this.listQuery.rush_start_time = value[0] / 1000;
        this.listQuery.rush_end_time = value[1] / 1000;
      } else {
        this.listQuery.rush_start_time = undefined;
        this.listQuery.rush_end_time = undefined;
      }
    },
    /**自定义时间 */
    handleChangeDate2(value) {
      if (value) {
        this.listQuery.pause_start_time = value[0] / 1000;
        this.listQuery.pause_end_time = value[1] / 1000;
      } else {
        this.listQuery.pause_start_time = undefined;
        this.listQuery.pause_end_time = undefined;
      }
    },
    /**自定义时间 */
    handleChangeDate1(value) {
      if (value) {
        this.listQuery.start_time = value[0] / 1000;
        this.listQuery.end_time = value[1] / 1000;
      } else {
        this.listQuery.start_time = undefined;
        this.listQuery.end_time = undefined;
      }
    },
    handleSearch() {
      this.meta.page = 1;
      this.handleGetData();
    },
    handleReset() {
      this.date_value = null;
      this.date_value1 = null;
      this.meta = {
        page: 1,
        page_size: 20
      };
      this.listQuery = {
        user_code: undefined,
        nickname: undefined,
        room_name: undefined,
        is_rain: undefined,
        type: undefined,
        rush_start_time: undefined,
        rush_end_time: undefined,
        start_time: undefined,
        end_time: undefined
      };
      this.handleGetData();
    },
    handleGetDetail(id) {
      this.detail = id;
      this.visible = true;
    }
  }
};
</script>
<style lang="scss" scoped></style>
